<template>
  <div>
    <!-- 二级路由坑 -->
    <router-view v-if="$route.path == '/home/seach'"></router-view>
    <div v-else>
      <!-- 搜索框 -->
      <van-search
        v-model="value"
        placeholder="请输入搜索关键词"
        shape="round"
        @click="Seach1"
      />
      <!-- 轮播图 -->
      <Lunbo :bannerArr="bannerArr"></Lunbo>
      <!-- 宫格 -->
      <Gird :GirdArr="GirdArr"></Gird>
      <Zhizao :brandListArr="brandListArr"></Zhizao>
      <Xinpin :newGoodsListArr="newGoodsListArr"></Xinpin>
      <Renqi :hotGoodsListArr="hotGoodsListArr"></Renqi>
      <Zhuanxuan :topicListArr="topicListArr"></Zhuanxuan>
      <div v-for="item in categoryListArr" :key="item.id">
        <Jujia :name="item.name" :items="item.goodsList"></Jujia>
      </div>
    </div>
  </div>
</template>

<script>
//引入轮播图
import Lunbo from "@/components/Lunbo.vue";
//引入 轮播图axios
import { GetDay } from "@/utils/http";
//console.log(GetDay);
//引入 宫格
import Gird from "@/components/Gird.vue";
//引入制造商
import Zhizao from "@/components/Zhizao.vue";
// 新品首发
import Xinpin from "@/components/Xinpin.vue";
//人气推荐
import Renqi from "@/components/Renqi.vue";
//专题精选
import Zhuanxuan from "@/components/Zhuanxuan.vue";
//分类精选
import Jujia from "@/components/Jujia.vue";

export default {
  name: "Home",
  components: {
    Lunbo,
    Gird,
    Zhizao,
    Xinpin,
    Renqi,
    Zhuanxuan,
    Jujia,
  },
  data() {
    return {
      value: "", //搜索框内容
      bannerArr: [], //轮播图数据
      GirdArr: [], //宫格数据
      brandListArr: [], // 制造商
      newGoodsListArr: [], //新品首发
      hotGoodsListArr: [], //人气推荐
      topicListArr: [], //专题精选
      categoryListArr: [], //居家
    };
  },
  created() {
    console.log(this);
    GetDay().then((res) => {
      //console.log(res);
      this.bannerArr = res.data.data.banner;
      this.GirdArr = res.data.data.channel;
      this.brandListArr = res.data.data.brandList;
      this.newGoodsListArr = res.data.data.newGoodsList;
      this.hotGoodsListArr = res.data.data.hotGoodsList;
      this.topicListArr = res.data.data.topicList;
      this.categoryListArr = res.data.data.categoryList;
    });
  },
  methods: {
    Seach1() {
      this.$router.push("/home/seach");
      //location.reload()
    },
  },
};
</script>

<style scope>
</style>